<template>
  <div class="content">
    <div class="content-title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{ problemContent.titleA }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ problemContent.titleB }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ problemContent.titleC }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content-items">
      <div
        class="item"
        v-for="(item, index) in problemContent.content"
        :key="index"
      >
        <el-link :underline="false">{{ item.tit }}</el-link>
        <div class="desc">{{ item.timer }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {};
  },
  props: {
    problemContent: {}
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  .content-title {
    margin-bottom: 35px;
    .el-breadcrumb__inner {
      color: #323233;
    }
  }
  .content-items {
    text-align: left;
    .item {
      display: flex;
      flex-direction: column;
      height: 72px;
      line-height: 25px;
      margin-bottom: 16px;
      border-bottom: 1px solid #ebedf0;
      .el-link {
        color: #323233;
        font-weight: 700;
        font-size: 16px;
        justify-content: flex-start;
      }
      .desc {
        color: #999;
        font-size: 14px;
      }
    }
  }
}
</style>
